<script setup name="OutstandingWorkProceedDetail">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElTable, ElTableColumn, ElPagination, ElSelect, ElOption, ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import service from '@/utils/request';

// 数据存储
const router = useRouter();
const routerQuery = router.currentRoute.value.query;

// 表格数据相关
const tableData = ref([]);
const pageNum = ref(1); // 当前页码
const pageSize = ref(5); // 每页显示的条数
const totalSize = ref(0); // 总条数

// 搜索框相关
const searchValue = ref(''); // 当前搜索框的值
const searchRef = ref(null); // 右侧搜索框元素

// 数据处理方法
const fixedTableData = (data) => {
  if (!data) {
    return [];
  }
  return data.map((item) => ({
    name: item.username,
    id: item.studentId,
    studentWorkId: item.studentWorkId,
    major: item.major,
    grade: item.grade,
    class: item.className,
    taskState: item.state,
    score: item.score,
    operation: '详情',
    taskName: routerQuery.taskName,
  }));
};

const getTableData = (searchKey) => {
  service({
    method: "post",
    url: "/superadmin/score/class",
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('token'),
    },
    params: {
      academicWorkId: routerQuery.workId,
      condition: searchKey,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    }
  }).then((res) => {
    tableData.value = fixedTableData(res.data.list || []);
    totalSize.value = res.data.total || 0;
  }).catch((error) => {
    //console.error('获取表格数据失败:', error);
    ElMessage({
      message: '获取数据失败',
      type: 'error',
    });
    tableData.value = [];
    totalSize.value = 0;
  });
};

getTableData("");

// 搜索框相关事件
const searchFocus = () => {
  searchRef.value.classList.add('searchActive');
};

const searchBlur = () => {
  if (searchValue.value === '') {
    searchRef.value.classList.remove('searchActive');
  }
};

const searchChange = () => {
  getTableData(searchValue.value);
};

// 点击面包屑导航
const crumberClick = () => {
  router.push({
    path: '/superAdministrator/scoreOverview',
    query: {
      state: "进行中",
    }
  });
};

// 点击班级详情
const operationClick = (row, column) => {
  if (column.property !== 'operation') {
    return;
  }
  router.push({
    path: '/superAdministrator/outstandingWork/proceed/detail/mark',
    query: { ...row, ...routerQuery }
  });
};

// 底部分页相关
const handleSizeChange = (data) => {
  pageNum.value = data;
  getTableData(searchValue.value);
};
</script>

<template>
  <div class="outstandingWorkProceedDetail">
    <!-- 导航路径 -->
    <div class="breadcrumb">
      <span class="breadcrumb-item" @click="crumberClick">进行中-考核情况列表</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item" @click="router.push({
        path: '/superAdministrator/scoreOverview/proceed/detail',
        query: routerQuery
      })">导师情况</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current">导师突出工作情况</span>
    </div>
    
    <!-- 主要内容 -->
    <div class="layout">
      <!-- 信息卡片 -->
      <div class="info-card">
        <div class="card-header">{{ routerQuery.taskName }}</div>
        <div class="card-content">
          <div class="info-item">
            <span class="item-label">导师姓名</span>
            <span class="item-value">{{ routerQuery.name }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">工号</span>
            <span class="item-value">{{ routerQuery.jobId }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">任务名称</span>
            <span class="item-value">{{ routerQuery.taskName }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">分数</span>
            <span class="item-value">{{ routerQuery.score }}</span>
          </div>
        </div>
      </div>
      
      <!-- 工作情况表格 -->
      <div class="table-section">
        <div class="section-header">
          <div class="left">
            <h3>班级填报情况</h3>
          </div>
          <div class="right">
            <div class="search" ref="searchRef">
              <input 
                v-model="searchValue" 
                type="text" 
                placeholder="搜索" 
                @focus="searchFocus" 
                @blur="searchBlur"
                @change.enter="searchChange"
              />
              <el-icon class="icon"><Search /></el-icon>
            </div>
          </div>
        </div>
        
        <!-- 数据表格 -->
        <div class="table-container">
          <el-table
            :data="tableData"
            :style="{width: '100%'}"
            height="calc(100vh - 400px)"
            show-overflow-tooltip
            empty-text="暂无数据"
            :header-cell-style="{color: '#000', background: '#f2f3f5'}"
            @cell-click="operationClick"
          >
            <el-table-column align="center" prop="name" label="姓名" width="100"></el-table-column>
            <el-table-column align="center" prop="id" label="学号" width="100"></el-table-column>
            <el-table-column align="left" prop="major" label="专业"></el-table-column>
            <el-table-column align="center" prop="grade" label="年级" width="100"></el-table-column>
            <el-table-column align="center" prop="class" label="班级" width="150"></el-table-column>
            <el-table-column align="center" prop="taskState" label="任务状态" width="120">
              <template #default="scope">
                <span :class="`task-status-${scope.row.taskState}`">{{ scope.row.taskState }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="score" label="分数" width="100"></el-table-column>
            <el-table-column align="center" prop="operation" label="操作" width="100">
              <template #default="scope">
                <span class="operation-link">{{ scope.row.operation }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <!-- 底部分页器 -->
        <div class="table-footer">
          <div class="left">
            <div class="total">共计: {{ totalSize }} 条</div>
          </div>
          <div class="right">
            <div class="pagination">
              <el-pagination
                v-model="pageNum"
                layout="prev, pager, next"
                :total="totalSize"
                :page-size="pageSize"
                background
                size="small"
                @current-change="handleSizeChange"
              />
            </div>
            <div class="selector">
              <el-select 
                v-model="pageSize" 
                placeholder="每页条数" 
                style="width: 80px;" 
                size="small"
                @change="getTableData(searchValue);"
              >
                <el-option label="5条/页" :value="5"></el-option>
                <el-option label="10条/页" :value="10"></el-option>
                <el-option label="20条/页" :value="20"></el-option>
              </el-select>
            </div>
            <div class="jump">
              <span class="title">前往:</span>
              <input type="text" v-model="pageNum" @change="getTableData(searchValue);">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use "sass:color";

// 颜色变量
$primary-color: #4c6fb4;
$danger-color: #eb5757;
$success-color: #4bc65f;
$warning-color: #ff9800;
$info-color: #697ac7;
$gray-color: #909399;
$bg-light: #f1f2f3;
$bg-lighter: #f2f3f5;
$border-color: #e4e7ed;
$text-primary: #000000;
$text-secondary: #86909c;
$text-tertiary: #8e96a0;

.outstandingWorkProceedDetail {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
  
  // 导航路径样式
  .breadcrumb {
    height: 50px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: $text-secondary;
    background-color: white;
    border-bottom: 1px solid $border-color;
    
    .breadcrumb-item {
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        color: $primary-color;
        font-weight: 600;
        transform: translateY(-1px);
      }
    }
    
    .breadcrumb-separator {
      color: $text-tertiary;
    }
    
    .breadcrumb-current {
      color: $text-primary;
      font-weight: 500;
    }
  }
  
  // 主要内容布局
  .layout {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
  }
  
  // 信息卡片样式
  .info-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
    
    .card-header {
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid $border-color;
    }
    
    .card-content {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      
      .info-item {
        display: flex;
        align-items: center;
        min-width: 250px;
        gap: 15px;
        
        .item-label {
          color: $text-secondary;
          font-weight: 500;
          min-width: 80px;
        }
        
        .item-value {
          color: $text-primary;
          font-weight: 600;
        }
      }
    }
  }
  
  // 表格区域样式
  .table-section {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
    
    .section-header {
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid $border-color;
      
      .left h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: $text-primary;
      }
      
      .right {
        .search {
          width: 20vw;
          height: 36px;
          display: flex;
          align-items: center;
          border-radius: 6px;
          background-color: $bg-light;
          transition: all 0.3s ease;
          
          &:hover {
            background-color: lighten($bg-light, 5%);
          }
          
          input {
            height: 100%;
            width: 90%;
            outline: none;
            border: none;
            background-color: transparent;
            text-indent: 10px;
            color: $text-primary;
          }
          
          .icon {
            width: 10%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: $gray-color;
          }
        }
        
        .searchActive {
          outline: 2px solid $primary-color;
          background-color: white !important;
        }
      }
    }
    
    .table-container {
      padding: 20px;
      
      // 任务状态样式
      .task-status-未提交 {
        color: $gray-color;
        font-weight: 600;
      }
      
      .task-status-已完成 {
        color: $success-color;
        font-weight: 600;
      }
      
      .task-status-未完成打分 {
        color: $danger-color;
        font-weight: 600;
      }
      
      // 操作链接样式
      .operation-link {
        color: $primary-color;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-block;
        
        &:hover {
          color: color.adjust($primary-color, $lightness: -10%);
          transform: scale(1.05);
          text-decoration: underline;
        }
      }
    }
    
    .table-footer {
      padding: 15px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid $border-color;
      
      .left {
        .total {
          font-size: 12px;
          color: $text-secondary;
        }
      }
      
      .right {
        display: flex;
        align-items: center;
        gap: 15px;
        
        .pagination, .selector {
          margin: 0;
        }
        
        .jump {
          display: flex;
          align-items: center;
          gap: 5px;
          
          .title {
            font-size: 12px;
            color: $text-secondary;
          }
          
          input {
            width: 40px;
            height: 25px;
            text-align: center;
            border: 1px solid $border-color;
            border-radius: 4px;
            outline: none;
            transition: border-color 0.3s ease;
            
            &:focus {
              border-color: $primary-color;
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .outstandingWorkProceedDetail {
    .breadcrumb {
      padding: 0 10px;
      font-size: 14px;
    }
    
    .layout {
      padding: 10px;
    }
    
    .info-card {
      padding: 15px;
      
      .card-content {
        .info-item {
          min-width: 100%;
          justify-content: space-between;
        }
      }
    }
    
    .table-section {
      .section-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        
        .right {
          width: 100%;
          
          .search {
            width: 100%;
          }
        }
      }
      
      .table-container {
        padding: 10px;
      }
      
      .table-footer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        
        .right {
          flex-wrap: wrap;
        }
      }
    }
  }
}
</style>